<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Palette</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var values = {
			number: 1,
			string: 200,
			checkbox: true,
			list: 'Two',
			text: 'Hello World!'
		};
		var components = {
			number: {
				type: 'number',
				label: 'A Number',
				step: 2.5
			},
			string: {
				type: 'string',
				label: 'A String'
			},
			checkbox: {
				type: 'boolean',
				label: 'A Checkbox',
				onChange: function(value) {
					values.list = value ? 'Two' : 'One';
				}
			},
			list: {
				type: 'list',
				label: 'A List',
				options: [ 'One', 'Two', 'Three' ]
			},
			text: {
				type: 'text',
				label: 'A Text'
			},
			button: {
				type: 'button',
				label: 'A Button',
				value: 'Click Me!',
				onClick: function() {
					console.log('Resetting');
					palette.reset();
					values.text = 'You clicked!';
				}
			},
			slider: {
				type: 'slider',
				label: 'A Slider',
				value: 10,
				range: [0, 50],
				step: 10
			}
		};
		var palette = new Palette('Values', components, values);
		palette.onChange = function(component, name, value) {
			console.log(name + ' = ' + value, component);
		}
		values.number = 10;
		values.string = 'Woop woop';
		values.list = 'Three';
		console.log(JSON.stringify(values));
	</script>
</head>
<body>
	<canvas id="canvas" width="640" height="100"></canvas>
</body>
</html>
